import React, { createRef } from "react";

// react类组件
class Component extends React.Component {
  // 创建实例对象
  msgRef = createRef()

  getValue = () => {
    console.log(this.msgRef);
    console.log(this.msgRef.current.value);
  }

  // 渲染ui结构
  render() {
    return (
      <>
      {/* 绑定ref */}
        输入框: <input type="text" ref={ this.msgRef } />
        <button type="button" onClick={ this.getValue }>点击获取输入框的值</button>
      </>
    )
  }
}

function App() {
  return (
    <div className="App">
      <Component></Component>
    </div>
  );
}

export default App;








// import React, { createRef } from "react";

// class App extends React.Component {
//   myRef = createRef();

//   getMyRef = () => {
//     console.log(this.myRef);
//   }
//   render() {
//     return (
//       <>
//         <div ref={ this.myRef }>React类组件</div>
//         <button onClick={ this.getMyRef }>获取</button>
//       </>
//     )
//   }
// }

// export default App;


// import { useRef } from "react";

// function App() {
//   const myRef = useRef(null);

//   function getMyRef() {
//     console.log(myRef);
//   }
//   return (
//     <>
//       <div ref={ myRef }>React函数组件</div>
//       <button onClick={ getMyRef }>获取</button>
//     </>
//   )
// }

// export default App;
